import { defineComponent, ref } from "vue";
import Button from "@/components/Button";
import List, { ListItem } from "@/components/List";
import Panel from "@/components/Panel";

const data = [
  { id: "Mondstadt", name: "蒙德" },
  { id: "Liyue", name: "璃月" },
  { id: "Inazuma", name: "稻妻" },
  { id: "Sumeru", name: "须弥" },
  { id: "Fontaine", name: "枫丹" },
  { id: "Natlan", name: "纳塔" },
  { id: "Snezhnaya", name: "至冬" },
];

function reverseString(str: string) {
  return str.split("").reverse().join("");
}

const ListDemo = defineComponent({
  setup() {
    const rows = ref(data);
    const header = ref("区域");
    const footer = ref("区域列表");

    const handleSort = () => {
      rows.value.reverse();
      header.value = reverseString(header.value);
      footer.value = reverseString(footer.value);
    };

    return () => (
      <div class="flex gap-4 items-start mb-4">
        <List
          header={<div>{header.value}</div>}
          footer={<div>{footer.value}</div>}
          dataSource={rows.value}
          bordered
          rowKey={(it) => it.id}
          renderItem={(it) => <ListItem>{it.name}</ListItem>}
          class="flex-1"
        />
        <div class="flex-1">
          <Button onClick={handleSort}>排序</Button>
        </div>
      </div>
    );
  },
});

export default function Lists() {
  return (
    <Panel class="bg-white">
      {{
        title: () => "Lists",
        default: () => (
          <>
            <div class="flex gap-4 items-start mb-4">
              <List
                header={<div>区域</div>}
                footer={<div>区域列表</div>}
                dataSource={data}
                bordered
                rowKey={(it) => it.id}
                renderItem={(it) => <ListItem>{it.name}</ListItem>}
              />
              <List
                header={<div>区域</div>}
                dataSource={data}
                rowKey={(it) => it.id}
                renderItem={(it) => <ListItem>{it.name}</ListItem>}
              />
              <List
                footer={<div>区域列表</div>}
                dataSource={data}
                bordered
                rowKey={(it) => it.id}
                renderItem={(it) => <ListItem>{it.name}</ListItem>}
              />
              <List dataSource={data} rowKey={(it) => it.id} renderItem={(it) => <ListItem>{it.name}</ListItem>} />
            </div>
            <ListDemo />
          </>
        ),
      }}
    </Panel>
  );
}
